<template>
	<view class="step">
		<template v-for="i, idx in list" >
			<view class="stepitem" :key="idx">
				<view class="stephead">
					<view class="stepicon">
						<u--image width="30rpx" height="30rpx" src="/static/images/ui/bg/check.png"></u--image>
					</view>
					<view class="stepline"></view>
				</view>
				<view class="stepbody">
					<view class="flex flexrow justify-between">
						<view>
							<text class="steptitle" v-if="idx==0">提交人</text>
							<text class="steptitle" v-else>审批人({{i.auditRole}})</text>
						</view>
						<text class="steptime">{{i.auditTime}}</text>
					</view>
					<text class="stepsub">{{i.auditUserName}}</text>
					<view class="stepcontent" v-if="idx>0">
						<view class="flex align-center flexrow" v-if="i.status==2">
							<u-icon name="checkmark-circle-fill" color="#1dbf5c" size="12"></u-icon>
							<text class="ml-1 text-green font-12">审批通过</text>
						</view>
						<view class="flex align-center flexrow" v-else-if="i.status==3">
							<u-icon name="checkmark-circle-fill"  color="#EE3636" size="12"></u-icon>
							<text class="ml-1 text-red font-12">审批不通过</text>
						</view>
						<view class="flex align-center flexrow" v-else-if="i.status==1">
							<u-icon name="clock-fill" color="#86898c"  size="12"></u-icon>
							<text class="ml-1 font-12 text-grey1">待审批</text>
						</view>
					</view>
				</view>
			</view>
			<view class="stepitem" v-if="idx==list.length-1&&i.copyUserName">
				<view class="stephead">
					<view class="stepicon">
						<u--image width="30rpx" height="30rpx" src="/static/images/ui/bg/check.png"></u--image>
					</view>
					<view class="stepline"></view>
				</view>
				<view class="stepbody">
					<view class="flex flexrow justify-between">
						<view >
							<text class="steptitle">抄送人(财务管理员)</text>
						</view>
						<text class="steptime">{{i.auditTime}}</text>
					</view>
					<text class="stepsub">{{i.copyUserName}}</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"bg-nstep",
		props:{
			list:{
				default:()=>([])
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.step {
	height: 800rpx;
}
.flexrow{
	flex-direction: row;
}
.stepitem {
	display: flex;
	flex-direction: row;
	padding-bottom: 10rpx;
	position: relative;
}
.stepicon {
	z-index: 1000;
}
.stephead {
	
}
.stepline {
	position: absolute;
	width: 2rpx;
	height: 100%;
	background-color: #FAFAFA;
	left:15rpx;
	top:30rpx;
	font-size: 14px;
}
.stepbody{
	margin-left: 18rpx;
	font-size: 14px;
	flex:1;
}
.steptitle {
	font-size: 30rpx;
	line-height: 30rpx;
	font-family: PingFang SC, PingFang SC-Medium;
	font-weight: 500;
	text-align: left;
	color: #1d2129;
}
.steptime {
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: right;
	color: #86898c;
}
.stepsub {
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #4e5969;
	line-height: 42rpx;
	margin: 30rpx 0 20rpx 0;
}
</style>